<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>搜索列表</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>

<div id="app" v-cloak>
    <div class="search flex-y-center flex-col">
        <h2>供应社</h2>
        <div class="search-box flex-y-center">
            <input class="input-inner" v-model="keyword" type="text" placeholder="请输入公司名字"><span class="search-btn" @click="search">搜索</span>
        </div>
    </div>
    <div class="results main">
        <div class="results-condition">
            <div class="title marginBottom">筛选条件</div>
<!--             <div class="results-item flex-row">
                <span class="results-item-left">地区：</span>
                <div class="results-item-right">
                    <a href="" class="single active">南昌市</a>
                    <span class="single">赣州市</span>
                    <span class="single">宜春市</span>
                    <span class="single">萍乡市</span>
                    <span class="single">九江市</span>
                    <span class="single">上饶市</span>
                    <span class="single">新余市</span>
                    <span class="single">鹰潭市</span>
                    <span class="single">吉安市</span>
                    <span class="single">景德镇市</span>
                    <span class="single">高安市</span>
                    <span class="single">上高市</span>
                    <span class="single">井冈山市</span>
                    <span class="single">抚州市</span>
                    <span class="single">樟树市</span>
                    <span class="single">贵溪市</span>
                    <span class="single">乐平市</span>
                    <span class="single">瑞昌市</span>
                    <span class="single">庐山市</span>
                    <span class="single">德兴市</span>
                    <span class="single">瑞金市</span>
                </div>
            </div> -->

             <div class="results-item flex-row">
                <span class="results-item-left">地区：</span>
                <div class="results-item-right">
                    <a href="javascript:void(0)" class="single"  @click="addressselect('',999)" :class="{active: addressactive == 999}">全部</a>
                    <a href="javascript:void(0)" class="single" v-for="(vo,index) in addresslist" @click="addressselect(vo.id,index)" :class="{active: addressactive == index}">{{vo.name}}</a>
                </div>
            </div> 

            <div class="results-item flex-row">
                <span class="results-item-left">行业：</span>
                <div class="results-item-right">
                    <a href="javascript:void(0)" class="single"  @click="industryselect('',999)" :class="{active: industryactive == 999}">全部</a>
                    <a href="javascript:void(0)" class="single" v-for="(vo,index) in industrylist" @click="industryselect(vo.id,index)" :class="{active: industryactive == index}">{{vo.name}}</a>
                </div>
            </div> 

<!--             <div class="results-item flex-row">
                <span class="results-item-left">行业：</span>
                <div>
                    <span class="single">通信软件</span>
                    <span class="single">装修建材</span>
                    <span class="single">商务服务</span>
                    <span class="single">家政服务</span>
                    <span class="single">教育培训</span>
                    <span class="single">通信软件</span>
                    <span class="single">通信软件</span>
                    <span class="single">通信软件</span>
                    <span class="single">通信软件</span>
                </div>
            </div> -->
        </div>

        <div class="results-list main">
            <div class="title">最新供应社</div>
            <ul class="news-list">
                <li class="news-item" v-for="(vo,index) in companylist">
                    <a class="flex-row" v-bind:href="'../Company/detail?id='+ vo.id " >
<!--                         <div class="news-img flex-grow-0">
                            <img src="./img/logo.png" alt="">
                        </div> -->
                        <div class="news-content flex-grow-1">
                            <h3>{{vo.company_name}}</h3>
                            <span>法人：{{vo.legalperson}}</span>
                            <span>电话：{{vo.phone}}</span>
                            <span>地址：{{vo.liveaddress}}</span>
                            <span>农业分类：{{vo.classification}}</span>
                            <span>地区：{{vo.address}}</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

        <!--分页-->
        <div class="item-con-pager">
            <div class="pager-container">
                <el-pagination layout="prev, pager, next" :total="query.total" :current-page="query.page" :page-size="query.pageSize" @current-change="pageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/static/js/axios.min.js"></script>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script src="/static/js/index.js"></script>

<script type="text/javascript">
new Vue({
    el: '#app',
    data() {
        return {
            query: {
                total: 0,
                page: 1,
                pageSize: 16
            },
            companylist: [], // 职位类别
            status: '',
            id: '',
            keyword: '',
            address : '',  // 地区
            addresslist : [],  // 地区
            addressactive : 999,   // 行业选中状态
            classification : '',
            industrylist : [],  // 融资阶段
            industryactive : 999,   // 融资选中状态
        }
    },
    created() {
        this.loadData();
        this.getdata();
    },
    methods: {
        pageChange(page) {
            this.query.page = page
            this.loadData()
        },
        getdata() {
            axios.post("/index/company/address").then(res => {
                this.addresslist = res.data.list
            }).catch(e => {
                console.log(e)
            })
            axios.post("/index/company/industry").then(res => {
                this.industrylist = res.data.list
            }).catch(e => {
                console.log(e)
            })
        },
        addressselect(id,index) {
            this.address = id;
            this.addressactive = index;

            if (index == 999) {
                this.address = '';
            }

            this.loadData();
        },
        industryselect(id,index) {
            this.classification = id;
            this.industryactive = index;

            if (index == 999) {
                this.classification = '';
            }

            this.loadData();
        },
        loadData() {
            axios.post("/index/company/list",{
                page : this.query.page,
                classification : this.classification,
                address : this.address,
                keyword : this.keyword
            }).then(res => {
                this.companylist = res.data.list
                this.query.total = res.data.sum
            }).catch(e => {
                console.log(e)
            })
        },
        // 列表选中
        industrysele(name) {
            this.industryact = name
            this.query.page = 1
            this.loadData()
        },
        financingsele(name){
            this.financingact = name
            this.query.page = 1
            this.loadData()
        },
        search(){
            this.loadData();
        }
    },
    filters: {
        formatDate(time) {
            let date = new Date(time * 1000);
            //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM; //月补0
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d; //天补0
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h; //小时补0
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m; //分钟补0
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s; //秒补0
            return y + '-' + MM + '-' + d;
        }
    },
})
</script>
</body>
</html>